<template xmlns:el-col="http://www.w3.org/1999/html">
  <div>
    <!--用户视图标题栏-->
    <el-row style="text-align: center">
      <span style="font-size: 40px">{{customer.customerName}}</span>
      <span style="display: block;font-size: 15px">创建日期：{{customer.customerCreatdate}} , 生命周期：
        <span v-if="customer.customerLifecycle == 1">{{customerLifecycle[0].label}}</span>
        <span v-if="customer.customerLifecycle == 2">{{customerLifecycle[1].label}}</span>
        <span v-if="customer.customerLifecycle == 3">{{customerLifecycle[2].label}}</span>
        <span v-if="customer.customerLifecycle == 4">{{customerLifecycle[3].label}}</span>
      </span>
    </el-row>
    <div style="width: 100%;margin-top: 10px">
      <div style="width: 40%;float: left">
        <!--基本信息-->
        <el-row style="padding:10px 20px">
          <el-col :span="24">
            <div class="viewBorder">
              <span class="bigTitle"><i class="el-icon-user"></i> 基本信息</span><br/><br/>
              <span class="textTitle">简称:  </span><span class="textValue">{{customer.customerSimplename}}</span>
              <span class="textTitle">种类:  </span>
              <span class="textValue">
          <span v-if="customer.customerType == 1">{{userType[0].label}}</span>
          <span v-if="customer.customerType == 2">{{userType[1].label}}</span>
          <span v-if="customer.customerType == 3">{{userType[2].label}}</span>
          <span v-if="customer.customerType == 4">{{userType[3].label}}</span>
          <span v-if="customer.customerType == 5">{{userType[4].label}}</span>
        </span>
              <span class="textTitle">来源:  </span>
              <span class="textValue">
          <span v-if="customer.customerFrom == 1">{{userFrom[0].label}}</span>
          <span v-if="customer.customerFrom == 2">{{userFrom[1].label}}</span>
          <span v-if="customer.customerFrom == 3">{{userFrom[2].label}}</span>
          <span v-if="customer.customerFrom == 4">{{userFrom[3].label}}</span>
          <span v-if="customer.customerFrom == 5">{{userFrom[4].label}}</span>
        </span><br/>
              <span class="textTitle">首次签约日期:  </span><span class="textValue">{{customer.customerContractdate}}</span><span v-if="customer.customerContractdate === null">暂未签约</span><br/>
              <span class="textTitle">备注:  </span><span class="textValue">{{customer.customerTip}}</span>
            </div>
          </el-col>
        </el-row>
        <!--签约数据-->
        <el-row style="padding:10px 20px">
          <el-col :span="24">
            <div class="viewBorder">
              <span class="bigTitle"><i class="el-icon-tickets"></i> 签约数据</span><br/><br/>
              <span v-if="customer.contractsByCustomerId.length === 0">暂无数据</span>
              <div v-if="customer.contractsByCustomerId.length != 0">
                <el-row>
                  <el-col :span="6">
                    <div style="border-right: 1px solid #CCCCCC;">
                      <span style="display: block;text-align: center;margin-right:0px">{{customer.contractsByCustomerId[0].contractTotalAmount}}元</span>
                      <span style="display: block;text-align: center;color: #B3C0D1;font-size: 14px;margin-top: 10px;margin-right:0px">合约</span>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div style="border-right: 1px solid #CCCCCC;">
                      <span style="display: block;text-align: center;margin-right:0px">{{customer.contractsByCustomerId[0].contractTotalAmount}}元</span>
                      <span style="display: block;text-align: center;color: #B3C0D1;font-size: 14px;margin-top: 10px;margin-right:0px">发货</span>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div style="border-right: 1px solid #CCCCCC;">
                      <span style="display: block;text-align: center;margin-right:0px">{{customer.contractsByCustomerId[0].contractBackAmount}}元</span>
                      <span style="display: block;text-align: center;color: #B3C0D1;font-size: 14px;margin-top: 10px;margin-right:0px">回款</span>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div>
                      <span style="display: block;text-align: center;margin-right:0px">{{customer.contractsByCustomerId[0].contractTotalAmount-customer.contractsByCustomerId[0].contractBackAmount}}元</span>
                      <span style="display: block;text-align: center;color: #B3C0D1;font-size: 14px;margin-top: 10px;margin-right:0px">欠款</span>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <div>
                    <div style="text-align: center;margin-top: 10px;font-size: 14px">合约回款进度</div>
                    <el-progress :percentage="percentage" :color="customColorMethod" style="padding:10px"></el-progress>
                  </div>
                </el-row>
              </div>
            </div>
          </el-col>
        </el-row>
        <!--联系人-->
        <el-row style="padding:10px 20px">
          <el-col :span="24">
            <div class="viewBorder">
              <span class="bigTitle"><i class="el-icon-phone-outline"></i> 联系人</span><br/><br/>
              <div v-if="contactList.length > 0" class="contactBox">
                <el-table
                  :data="contactList">
                  <el-table-column
                    prop="contactName"
                    label="姓名">
                    <template slot-scope="scope">
                      <el-link :underline="false" @click="openDialog(scope.row)">
                    <span style="color: #333333">
                      <span>{{scope.row.contactName}}</span>
                    </span>
                      </el-link>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="contactPhone"
                    label="手机">
                  </el-table-column>
                  <el-table-column
                    prop="contactQq"
                    label="QQ">
                  </el-table-column>
                  <el-table-column
                    prop="contactWechat"
                    label="微信">
                  </el-table-column>
                  <el-table-column width="50px">
                    <template slot-scope="scope">
                      <el-link :underline="false" @click="openDialog(scope.row)">
                        <el-tooltip class="item" effect="dark" content="查看联系人信息">
                          <i class="el-icon-view"></i>
                        </el-tooltip>
                      </el-link>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div v-if="contactList.length === 0">
                <span>暂无联系人</span>
              </div>
            </div>
          </el-col>
        </el-row>
        <!--用户画像-->
        <el-row style="padding:10px 20px">
          <el-col :span="24">
            <div class="viewBorder">
              <span class="bigTitle">
                <i class="el-icon-picture-outline-round"></i> 客户画像
                <el-tooltip content="自定义用户画像" placement="top">
                  <el-link @click="dialogPicture = true" icon="el-icon-setting" :underline="false"></el-link>
                </el-tooltip>
              </span><br/><br/>
              <span v-if="this.customer.customerImg == null || this.customer.customerImg == ''">暂无画像</span>
              <span v-if="this.customer.customerImg != null || this.customer.customerImg != ''">
                <img style="" :src="this.customer.customerImg">
              </span>
            </div>
          </el-col>
        </el-row>

        <el-dialog :visible.sync="dialogPicture" width="60%" style="color: #333333;"  >
          <el-divider>自定义客户画像</el-divider>
          <el-row style="text-align: center">
            <span v-if="this.customer.customerImg == ''|| this.customer.customerImg == null ">暂无画像</span>
            <span v-if="this.customer.customerImg != ''|| this.customer.customerImg != null ">
                <img style="" :src="this.customer.customerImg">
              </span>
          </el-row>
          <el-row style="text-align: center;margin-top: 15px">
            <el-col>
              <el-upload :multiple="false" :show-file-list="false" :action="upload"
                         :file-list="fileList" :on-success="upload_success" list-type="picture">
                <el-button size="small" type="primary"><span style="color: white">编辑画像</span></el-button>
              </el-upload>
            </el-col>
          </el-row>
        </el-dialog>
      </div>
      <div style="width:60%; float: right">
        <!--跟单时间线-->
        <el-row style="padding:10px 20px">
          <div class="viewBorder_timeline">
            <span class="bigTitle"><i class="el-icon-date"></i> 跟单时间线</span><br/><br/>
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="所有跟单信息" name="所有"></el-tab-pane>
              <el-tab-pane label="销售机会" name="销售机会"></el-tab-pane>
              <el-tab-pane label="合同信息" name="合同"></el-tab-pane>
            </el-tabs>
            <div class="block">
              <div v-if="timelineList.length === 0">
                <span>暂无数据</span>
              </div>
              <div class="radio" v-if="timelineList.length != 0" style="margin-bottom: 20px;">
                <span>排序：</span>
                <el-radio-group v-model="reverse">
                  <el-radio :label="false">倒序</el-radio>
                  <el-radio :label="true">正序</el-radio>
                </el-radio-group>
              </div>
              <el-timeline :reverse="reverse">
                <el-timeline-item
                  v-for="(timeline, index) in timelineList"
                  :key="index"
                  :icon="timeline.timelineIcon"
                  :type="timeline.timelineType"
                  :color="timeline.timelineColor"
                  :size="timeline.timelineSize"
                  :timestamp="timeline.timelineTimestamp">
                  <div class="timelineBox">
                    {{timeline.timelineContent}}<br/>
                    <router-link style="margin-top: 5px;display: block" :to="{path: timeline.timelineRouter}">
                      <span style="font-size: 15px;">&nbsp{{timeline.timelineContentbody}}</span>&nbsp&nbsp<i v-if="timeline.timelineRouter" class="el-icon-right" style="font-size: 15px;color:#505458"></i>
                    </router-link>
                  </div>
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
        </el-row>
      </div>
    </div>



    <!--联系人弹窗 不可修改-->
    <el-dialog :visible.sync="dialogFormVisible" width="60%" style="color: #333333;"  >
      <el-form :model="contact" ref="con" label-width="100px">
        <el-row style="text-align: left">
          <el-col :span="20">
            <span style="font-size: 28px">联系人</span>
          </el-col>
          <el-col :span="4">
            <el-button size="middle" @click="handleEdit()" icon="el-icon-edit" plain>编辑</el-button>
          </el-col>
        </el-row>
        <el-divider>联系人</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名:" style="width: 90%">
              <el-input :disabled="true" v-model="contact.contactName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话:" style="width: 90%">
              <el-input :disabled="true" v-model="contact.contactPhone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item  label="对应客户:" style="width: 95%">
              <el-input :disabled="true" v-model="contact.customerByCustomerId.customerName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系人分类:" style="width: 90%">
              <el-select :disabled="true" v-model="contact.contactType" placeholder=" " style="width: 100%">
                <el-option
                  v-for="(item,index) in contactType"
                  :key="index"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别:" style="width: 90%">
              <el-select :disabled="true" v-model="contact.contactSex" style="width: 100%">
                <el-option
                  v-for="(item,index) in contactSex"
                  :key="index"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="地址:" style="width: 90%">
              <el-input :disabled="true" v-model="contact.contactAddress"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="详细地址:" style="width: 95%">
              <el-input :disabled="true" v-model="contact.contactDetailAaddress"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注:" style="width: 95%">
              <el-input
                :disabled="true"
                type="textarea"
                :rows="2"
                v-model="contact.contactTip"
                style="width: 100%">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider>单位</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="称谓:" style="width: 90%">
              <el-input :disabled="true" v-model="contact.contactBusiness"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="类型:" style="width: 90%">
              <el-select :disabled="true" v-model="contact.contactContacttype" placeholder=" " style="width: 100%">
                <el-option
                  v-for="(item,index) in contactContacttype"
                  :key="index"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="部门:" style="width: 90%">
              <el-input :disabled="true" v-model="contact.contactDept"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职务:" style="width: 90%">
              <el-input :disabled="true" v-model="contact.contactDuty"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider>网络联系方式</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="微信:" style="width: 90%">
              <el-input :disabled="true" v-model="contact.contactWechat"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="QQ:" style="width: 90%">
              <el-input :disabled="true" v-model="contact.contactQq"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="微信名称:" style="width: 90%">
              <el-input :disabled="true" v-model="contact.contactWechatname"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="QQ名称:" style="width: 90%">
              <el-input :disabled="true" v-model="contact.contactQqname"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" :offset="11">
            <el-button size="middle" @click="handleEdit()" icon="el-icon-edit" plain>编辑</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <!--联系人弹窗 可修改-->
    <el-dialog @close="closeDialog('con')" :visible.sync="dialogFormEditVisible" width="60%" style="color: #333333;"  >
      <el-form :model="contact" :rules="rules" ref="con" label-width="100px">
        <el-row style="text-align: left">
          <span style="font-size: 28px">联系人</span>
        </el-row>
        <el-divider>联系人</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="contactName" label="姓名:" style="width: 90%">
              <el-input v-model="contact.contactName" placeholder="联系人姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="contactName" label="电话:" style="width: 90%">
              <el-input v-model="contact.contactPhone" placeholder="手机号码"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item prop="customerByCustomerId" label="对应客户:" style="width: 95%">
              <el-input :disabled="true" v-model="contact.customerByCustomerId.customerName" placeholder="暂无"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="contactType" label="联系人分类:" style="width: 90%">
              <el-select v-model="contact.contactType" placeholder="请选择联系人分类类型" style="width: 100%">
                <el-option
                  v-for="(item,index) in contactType"
                  :key="index"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="contactSex" label="性别:" style="width: 90%">
              <el-select v-model="contact.contactSex" placeholder="请选择联系人性别" style="width: 100%">
                <el-option
                  v-for="(item,index) in contactSex"
                  :key="index"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="contactAddress" label="地址:" style="width: 90%">
              <el-input v-model="contact.contactAddress" placeholder="地址"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="详细地址:" style="width: 95%">
              <el-input v-model="contact.contactDetailAaddress" placeholder="详细地址"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注:" style="width: 95%">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="contact.contactTip"
                style="width: 100%">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider>单位</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="称谓:" style="width: 90%">
              <el-input v-model="contact.contactBusiness" placeholder="工作称谓"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="contactContacttype" label="类型:" style="width: 90%">
              <el-select v-model="contact.contactContacttype" placeholder="请选择联系人类型" style="width: 100%">
                <el-option
                  v-for="(item,index) in contactContacttype"
                  :key="index"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="部门:" style="width: 90%">
              <el-input v-model="contact.contactDept" placeholder="部门名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职务:" style="width: 90%">
              <el-input v-model="contact.contactDuty" placeholder="主要职务"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider>网络联系方式</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="微信:" style="width: 90%">
              <el-input v-model="contact.contactWechat" placeholder="微信账号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="QQ:" style="width: 90%">
              <el-input v-model="contact.contactQq" placeholder="QQ账号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="微信名称:" style="width: 90%">
              <el-input v-model="contact.contactWechatname" placeholder="微信名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="QQ名称:" style="width: 90%">
              <el-input v-model="contact.contactQqname" placeholder="QQ名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" :offset="8">
            <el-form-item>
              <el-button @click="" type="primary">保存</el-button>
              <el-button @click="dialogFormEditVisible = false">取消</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>

  </div>
</template>
<script>
  export default {
    data() {
      return {
        //表单验证
        rules: {
          contactName: [
            { required: true,message: '请输入联系人名称', trigger: 'blur' },
            { min: 2, max: 16, message: '长度在 2 到 16 个字符', trigger: 'blur' }
          ],
          contactPhone: [
            { required: true,message: '请输入联系人电话', trigger: 'blur' },
            { min: 8, max: 15, message: '长度在 8 到 15 个字符', trigger: 'blur' }
          ],
          contactType: [
            { required: true, message: '请选择联系人分类类型', trigger: 'blur' }
          ],
          contactSex: [
            { required: true,message: '请选择联系人性别', trigger: 'blur' }
          ],
          customerByCustomerId: [
            { required: true, message: '请选择对应客户', trigger: 'blur' }
          ],
          contactContacttype: [
            { required: true,message: '请选择联系人类型', trigger: 'blur' }
          ]
        },
        dialogPicture: false,
        fileList:[],
        upload:'http://122.51.140.72:12345/upload',
        percentage: 0,
        customer: {
          customerId: 0,//客户ID
          customerSimplename: '',//客户简称
          customerName: '',//客户名称
          customerLifecycle: '',//生命周期
          customerType: '',//客户种类（类型）
          employeeByEmpId: {},
          customerContractdate: '',//客户首次签约日期
          customerCreatdate: '',//客户创建日期
          customerPhone: '',//客户手机
          customerTel: '',//客户电话
          customerTip: '',//客户备注
          customerFrom: '',//客户来源
          custoemrCompanyname: '',//公司名称
          customerCompanytip: '',//公司备注
          customerPeoplenumber: '',//公司人数规模
          customerWork: '',//从事行业
          customerHttp: '',//公司网址
          customerAddress: '',//详细地址
          customerImg: '',//用户画像
          contractsByCustomerId:{},
          employeeByEmpId: {},
        },
        customerLifecycle: [{
          value: 1,
          label: '潜在客户'
        }, {
          value: 2,
          label: '签约'
        }, {
          value: 3,
          label: '重复购买'
        }, {
          value: 4,
          label: '失效'
        }],
        userType: [{
          value: 1,
          label: '客户'
        }, {
          value: 2,
          label: '供应商'
        }, {
          value: 3,
          label: '合作伙伴'
        }, {
          value: 4,
          label: '媒体'
        }, {
          value: 5,
          label: '其他'
        }],
        userFrom: [{
          value: 1,
          label: '电话来访'
        }, {
          value: 2,
          label: '客户介绍'
        }, {
          value: 3,
          label: '独立开发'
        }, {
          value: 4,
          label: '媒体宣传'
        }, {
          value: 5,
          label: '老客户'
        }],
        contactType: [{
          value: 1,
          label: '特别重要'
        }, {
          value: 2,
          label: '重要'
        }, {
          value: 3,
          label: '普通'
        }, {
          value: 4,
          label: '不重要'
        }, {
          value: 5,
          label: '失效'
        }],
        contactSex: [{
          value: '男',
          label: '男'
        },{
          value: '女',
          label: '女'
        }],
        contactContacttype: [{
          value: '主联系人',
          label: '主联系人'
        },{
          value: '联系人',
          label: '联系人'
        }],
        timeline: {
          timelineContent: '',
          timelineTimestamp: '',
          timelineColor: '',
          timelineSize: '',
          timelineIcon: '',
          timelineType: '',
          timelineContentbody: '',
          timelineRouter: ' ',
        },
        timelineList: [],
        contact: {
          contactId: 0,//联系人编号
          contactName: '',//联系人姓名
          contactPhone: '',//联系人电话
          contactType: '',//联系人分类
          contactSex:  '',//性别
          contactBusiness: '',//联系人工作
          contactContacttype: '',
          contactDept: '',//部门
          contactDuty: '',//职责
          contactQq: '',//QQ
          contactQqname: '',//QQ名称
          contactWechat: '',//微信
          contactWechatname: '',//微信名称
          contactAddress: '',//地址
          contactTip: '',//备注
          contactDetailAaddress: '',//详细地址
          customerByCustomerId: {},//对应客户
        },
        contactList: [],
        dialogFormVisible: false,//不可修改Dialog
        dialogFormEditVisible: false,//可修改Dialog
        reverse: false,
        activeName: '所有',

      };
    },
    methods:{
      closeDialog(formName){
        this.$refs[formName].resetFields();
        this.contact = {
          contactId: 0,//联系人编号
          contactName: '',//联系人姓名
          contactPhone: '',//联系人电话
          contactType: '',//联系人分类
          contactSex:  '',//性别
          contactBusiness: '',//联系人工作
          contactContacttype: '',
          contactDept: '',//部门
          contactDuty: '',//职责
          contactQq: '',//QQ
          contactQqname: '',//QQ名称
          contactWechat: '',//微信
          contactWechatname: '',//微信名称
          contactAddress: '',//地址
          contactTip: '',//备注
          contactDetailAaddress: '',//详细地址
          customerByCustomerId: {},//对应客户
        }
      },
      upload_success(response,file,flie_list){
        console.log(file.response);/*图片路径*/
        this.customer.customerImg = file.response
        this.changeImg();
      },
      /*提交路径到后台*/
      changeImg(){
        this.$axios.post('http://localhost:8088/update-customer', this.customer)
          .then(v => {
            this.dialogPicture = false
            this.$message({
              type: 'success',
              message: '已修改'
            })
            this.initData()
          }).catch()
      },
      customColorMethod(percentage) {
        if (percentage < 30) {
          return '#909399';
        } else if (percentage < 70) {
          return '#e6a23c';
        } else {
          return '#67c23a';
        }
      },
      handleClick(tab, event) {
        console.log(this.activeName);
        let customerId = this.$route.query.customerId;
        if(this.activeName == '所有'){
          this.$axios.get('http://localhost:8088/timeline-list', {
            params: {
              customerId : customerId
            }
          })
            .then(v => {
              this.timelineList = v.data
              console.log(this.timelineList)
            })
            .catch(function (v) {})
        }else{
          this.$axios.get('http://localhost:8088/timeline-type-list', {
            params: {
              customerId : customerId,
              activeName : this.activeName
            }
          })
            .then(v => {
              this.timelineList = v.data
              console.log(this.timelineList)
            })
            .catch(function (v) {})
        }
      },
      //查询客户信息
      initData(){
        let customerId = this.$route.query.customerId
        this.$axios.get('http://localhost:8088/customer-id', {
          params: {
            customerId : customerId
          }
        })
          .then(v => {
            this.customer = v.data;
            console.log(this.customer);
            if( this.customer.contractsByCustomerId[0].contractTotalAmount == undefined){
            }else{
              this.percentage = Math.floor((this.customer.contractsByCustomerId[0].contractBackAmount / this.customer.contractsByCustomerId[0].contractTotalAmount)*100);
            }
          })
          .catch(function (v) {}),
        this.$axios.get('http://localhost:8088/timeline-list', {
          params: {
            customerId : customerId
          }
        })
          .then(v => {
            this.timelineList = v.data
            console.log(this.timelineList)
          })
          .catch(function (v) {})
        this.$axios.get('http://localhost:8088/contact-list', {
          params: {
            customerId : customerId
          }
        })
          .then(v => {
            this.contactList = v.data

          })
          .catch(function (v) {})
     },
      openDialog(val){
        this.dialogFormVisible = true;
        this.contact = val;
        this.contact.contactId = val.contactId;
        this.contact.contactName = val.contactName;
        this.contact.contactPhone = val.contactPhone;
        this.contact.contactType = val.contactType;
        this.contact.contactSex = val.contactSex;
        this.contact.contactBusiness = val.contactBusiness;
        this.contact.contactContacttype = val.contactContacttype;
        this.contact.contactDept = val.contactDept;
        this.contact.contactDuty = val.contactDuty;
        this.contact.contactQq = val.contactQq;
        this.contact.contactQqname = val.contactQqname;
        this.contact.contactWechat = val.contactWechat;
        this.contact.contactWechatname = val.contactWechatname;
        this.contact.contactAddress = val.contactAddress;
        this.contact.contactTip = val.contactTip;
        this.contact.customerHttp = val.customerHttp;
        this.contact.contactDetailAaddress = val.contactDetailAaddress;
        this.contact.customerByCustomerId = val.customerByCustomerId;
      },
      handleEdit(){
        this.dialogFormVisible = false
        this.dialogFormEditVisible = true
      },
    },
    created: function () {
      this.initData()
    }
  }

</script>
<style>
.viewBorder{
  border: 1px solid rgba(54, 64, 74, 0.2);
  border-radius: 10px;
  padding:40px 40px;
  background: white;
}
.viewBorder span{
  margin-right: 20px;
  font-size: 16px;
  color: #505458;
}
.viewBorder_timeline{
  border: 1px solid rgba(54, 64, 74, 0.2);
  border-radius: 10px;
  padding:40px 40px;
  background: white;
}
.viewBorder_timeline span{
  margin-right: 0px;
  font-size: 16px;
  color: #505458;
}
.viewBorder_timeline .bigTitle{
  font-size: 25px;
}
.viewBorder .bigTitle{
  font-size: 25px;
}
.viewBorder .textTitle{
  color: #B3C0D1;
}
.viewBorder .textValue{
  color: #505458;
}
</style>
